<template>
  <Card>
    <Row>
      <Col span="3" style="font-size: 20px">权限查询</Col>
      <Col span="4">
        <Input type="text" placeholder="请输入权限名或描述" v-model="fuzzyKey">
          <span slot="prepend">
            <Icon type="ios-contact" slot="prefix"/>
          </span>
        </Input>
      </Col>
      <Col span="2" offset="14"><Button type="primary" @click="searchRole">查询</Button></Col>
      <Col span="1"><Button icon="ios-add-circle-outline" @click="value = true"></Button></Col>
      <Drawer title="新建权限" v-model="value" width="260" :mask-closable="false" :styles="styles">
        <Form :model="formData" :rules="rules" @keydown.enter.native="submit">
          <FormItem prop="name">
            <Input v-model="formData.name" placeholder="请输入权限名" >
            <span slot="prepend">
                <Icon type="ios-contact" slot="prefix"/>
              </span>
            </Input>
          </FormItem>
          <FormItem prop="description">
            <Input type="textarea" :rows="4" v-model="formData.description" placeholder="请输入角色描述"/>
          </FormItem>
          <FormItem prop="code">
            权限代码：<InputNumber :min="0" :max="1000" v-model="formData.code" style="width: 160px"></InputNumber>
          </FormItem>
        </Form>
        <div class="demo-drawer-footer">
          <Button @click="value3 = false">取消</Button>
          <Button type="primary" @click="submit">提交</Button>
        </div>
      </Drawer>
    </Row>
  </Card>
</template>

<script>
  import {url} from '../../../config/url'
    export default {
        name: "authority-form",
      props: {
        nameRules: {
          type: Array,
          default: () => {
            return [
              { required: true, message: '权限名不能为空', trigger: 'blur' }
            ]
          }
        },
        descriptionRules:{
          type: Array,
          default: () => {
            return [
              { required: true, message: '权限描述不能为空', trigger: 'blur' }
            ]
          }
        }
      },
      data(){
        return{
          fuzzyKey:'',
          code:0,
          value: false,
          authorityList:[],
          styles: {
            height: 'calc(100% - 55px)',
            overflow: 'auto',
            paddingBottom: '53px',
            position: 'static'
          },
          formData: {
            name: '',
            description:'',
            code:0,
          },
        }
      },
      computed:{
        rules(){
          return{
            name:this.nameRules,
            description:this.descriptionRules,
          }
        }
      },
      methods:{
        //提交需要新建角色的信息
        submit(){
          if(this.formData.code>0){
            if(this.formData.name.length>0&&this.formData.description.length>0){
              this.$axios.post(url+'/authority',{
                'name':this.formData.name,
                'description':this.formData.description,
                'code':this.formData.code
              },{
                headers:{
                  'Content-Type':'application/json'
                }
              }).then(res=>{
                if(res.data.error_code==0){
                  alert("新建权限成功");
                  this.formData.name='';
                  this.formData.description='';
                  this.formData.code=0;
                  this.value=false
                }else{
                  alert("新建权限失败："+res.data.error_msg)
                }
              })
            }else {
              alert("权限信息不能为空，新建权限失败")
            }
          }else {
            alert("请输入权限代码")
          }
        },
        //发送需要查询角色的条件
        searchRole(){
          this.authorityList=[];
          let query=JSON.stringify({
            'name':this.fuzzyKey,
            'description':this.fuzzyKey,
            'page_size':8,
            'fuzzy_key':['name','description'],
            'or_key':['name','description']
          });
          this.$axios.get(url+'/authority',{
            params:{
              'data':query
            }
          }).then(res=>{
            if(res.data.error_code==0){
              let size=res.data.data.records.length;
              let records=res.data.data.records;
              for(let i=0;i<size;i++){
                let record={
                  id:records[i].id,
                  name:records[i].name,
                  description:records[i].description,
                  code:records[i].code
                };
                this.authorityList.push(record)
              }
              this.$emit('authorityList',this.authorityList)
            }else{
              alert("查询失败"+this.data.error_msg)
            }
          })
        }
      }
    }
</script>

<style scoped>

</style>
